<template>
    <div>
        <!-- 搜索框接口错误 -->
        <el-input placeholder="请输入内容" v-model="value" maxlength="0" style="width: 60%;" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <!-- 订单表格 -->
        <el-table :data="orderList">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="订单编号" prop="order_number"></el-table-column>
            <el-table-column label="订单价格" prop="order_price"></el-table-column>
            <el-table-column label="是否付款">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.pay_status != '0'">已付款</el-tag>
                    <el-tag type="danger" v-else>未付款</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="是否发货" prop="is_send"></el-table-column>
            <el-table-column label="下单时间">
                <template slot-scope="scope">
                    {{  scope.row.update_time | trmes  }}
                </template>
            </el-table-column>
            <el-table-column label="操作" prop="">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle @click="dialogVisible = true"></el-button>
                    <el-button type="success" icon="el-icon-location-outline" circle @click="kuaidistatus = true">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改地址 没有接口 -->
        <el-dialog title="修改地址" :visible.sync="dialogVisible" width="30%">
            <el-form label-width="80px">
                <el-form-item label="活动名称">
                    <el-cascader :options="china" :props="{ expandTrigger: 'hover', label: 'value', value: 'value' }">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input maxlength="100"> </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 查看定位 -->
        <el-dialog title="物流进度" :visible.sync="kuaidistatus" width="30%">
            <el-timeline :reverse="false">
                <el-timeline-item v-for="(activity, index) in kuaidi" :key="index" :timestamp="activity.ftime">
                    {{  activity.context  }}
                </el-timeline-item>
            </el-timeline>
            <span slot="footer" class="dialog-footer">
                <el-button @click="kuaidistatus = false">取 消</el-button>
                <el-button type="primary" @click="kuaidistatus = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="form.pagenum" :page-sizes="[3, 5, 7, 10]" :page-size="form.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getOrders } from '@/http/order'
import { china } from './china'
import { kuaidi } from './kuaidi'
export default {
    data() {
        return {
            value: '',
            orderList: [],
            //请求列表参数 
            form: {
                pagenum: 1,
                pagesize: 5

            },
            //总条数
            total: 0,
            //修改地址参数
            obj: {

            },
            //添加的状态
            dialogVisible: false,
            //快递状态
            kuaidistatus: false,
            china: china,
            kuaidi: kuaidi

        }
    },
    created() {
        console.log(kuaidi);
        this.fn()
    },
    methods: {
        //渲染
        async fn() {
            let res = await getOrders(this.form)
            console.log(res);
            this.orderList = res.data.goods
            this.total = res.data.total
        },
        //条数发生变化
        handleSizeChange(v) {
            this.form.pagesize = v
            this.fn()
        },
        //页数发生变化
        handleCurrentChange(v) {
            this.form.pagenum = v
            this.fn()
        }

    }
}
</script>

<style>
.el-cascader-panel {
    height: 200px;
}
</style>